@import "./Card.less";
@import "./Tab.less";
@import "./Grid.less";
@import "./Table.less";
@import "./Form.less";
@import "./Dialog.less";
@import "./Tree.less";
@import "./Editor.less";
@import "../zero.less";
// PageCard / HelpCard
.web {
    &-card {
        .web-card-fit;
        background: @component-background;

        .ux-extra {
            float: right;
        }

        &-form {
            .web-card-fit;
            background: @component-background;

            .ant-card-body {
                padding-top: 3px;
                padding-left: 0;
            }
        }
    }

    &-tab {
        .web-tab-fit;
        background: @component-background;
    }

    &-row {
        &-head {
            .web-row-head-fit;
            background: @component-background;
        }
    }

    &-table {
        .web-table-fit;
        background: @component-background;

        &-adjust {
            .web-table-adjust-fit;
            background: @component-background;
        }

        &-secondary {
            .web-table-fit;

            .ant-table-thead {
                th {
                    background-color: @primary-color !important;
                    color: white;
                }
            }
        }

        &-tree {
            .web-table-fit;
            background: @component-background;

            &-adjust {
                .web-table-adjust-fit;
                background: @component-background;
            }

            .ant-table-expanded-row {

                .ant-table-thead {
                    th {
                        background-color: @primary-color !important;
                        color: white;
                    }
                }

                td[colspan] {
                    padding: 16px !important;
                    min-height: 80px !important;
                    max-height: 200px;
                    overflow-y: auto;
                }
            }
        }
    }


    &-form {
        .web-form-fit;
        background: @component-background;

        .has-error {
            .ant-form-explain {
                position: absolute;
                background-color: @color-error;
                color: white;
                border-radius: 3px;
                border: 1px solid @color-error;
                padding: 2px 5px;
                z-index: 100;
                /** From Animate.css **/
                animation-duration: 1s;
                animation-fill-mode: both;
                animation-name: bounceIn;
                top: -27px;
                display: none;
            }
        }

        &-has-error {
            .has-error .ant-form-explain {
                display: block;
            }

            &-defined {
                .has-error .ant-form-explain {
                    display: none;
                }
            }

            &-relative {
                .has-error {
                    .ant-form-item-children-icon {
                        position: relative;
                    }
                }
            }
        }

        .ant-form-item-with-help {
            margin-bottom: 0;
        }

        .ant-form-item-control {

            .show-help {
                &-enter {
                    display: none !important;
                }

                &-leave {
                    display: none !important;
                }
            }
        }

        .has-error, .has-success {
            width: 100%;
        }

        &-bottom {
            &-64 {
                padding-bottom: 64px;
            }

            &-32 {
                padding-bottom: 32px;
            }

            &-16 {
                padding-bottom: 16px;
            }
        }
    }

    &-dialog {
        .web-dialog-fit;
    }

    // editor
    &-editor {
        display: flex;
        flex-direction: row;
        .web-editor-fit;
    }

    &-viewer {
        display: flex;
        flex-direction: row;
        .web-editor-fit;
    }
}